<template>
  <div class="historyTerm" >
    <v-card>
      <v-toolbar color="#00897B" dark dense>
        <v-toolbar-title class="historyId">ID：{{ history.id }}</v-toolbar-title>
        <v-spacer></v-spacer>

        <div>
          <v-menu
              bottom
              origin="center center"
              transition="scale-transition"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                  text
                  v-bind="attrs"
                  v-on="on"
              >
                <v-icon >notes</v-icon>操作</v-btn>
            </template>

            <v-list>
              <v-list-item @click="toDetail">
                <v-list-item-title>
                  <v-btn text><v-icon >error_outline</v-icon>详情</v-btn>
                </v-list-item-title>
              </v-list-item>

              <v-list-item v-if="$store.getters.isStudent" @click.stop="onDoubt()">
                <v-list-item-title>
                  <v-btn text><v-icon>help_outline</v-icon> 存在疑惑 </v-btn>
                </v-list-item-title>
              </v-list-item>

              <v-list-item v-if="$store.getters.isTeacher && (history.correct_tag === 0 || history.correct_tag === 3)" @click.stop="onMark()">
                <v-list-item-title>
                  <v-btn text><v-icon>check_circle_outline</v-icon> 确认正确 </v-btn>
                </v-list-item-title>
              </v-list-item>

              <v-list-item v-if="$store.getters.isTeacher" @click.stop="onAnswer()">
                <v-list-item-title>
                  <v-btn text><v-icon>edit</v-icon>做出回答 </v-btn>
                </v-list-item-title>
              </v-list-item>

            </v-list>
          </v-menu>
        </div>

        <template v-slot:extension>
          <v-tabs v-model="tab" >
            <v-tabs-slider color="yellow"></v-tabs-slider>
            <v-tab>问题</v-tab>
            <v-tab>答案</v-tab>
          </v-tabs>
        </template>
      </v-toolbar>

      <v-tabs-items v-model="tab" class="text-left">
        <v-tab-item>
          <v-card flat>
            <v-card-text >{{ history.question }}</v-card-text>
          </v-card>
        </v-tab-item>

        <v-tab-item>
          <v-card flat>
            <v-card-text v-html="history.answer"></v-card-text>
          </v-card>
        </v-tab-item>

      </v-tabs-items>
    </v-card>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from "vue-property-decorator";
import { HistoryService } from "@/services/history.service";
import {ANSWER_ROUTE, DETAIL_ROUTE} from "@/router";

@Component({
  name: "SingleHistory"
})
export default class SingleHistory extends Vue {
  @Prop(Object) history!: any;
  @Prop(Boolean) isQuestion!: boolean;
  @Prop(Boolean) isAnswer!: boolean;
  data () {
    return {
      tab: null,
    }
  }

  getTag() {
    if (this.history.correct_tag == 0) {
      return "系统答案";
    } else if (this.history.correct_tag == 1) {
      return "老师确认";
    } else if (this.history.correct_tag == 2) {
      return "老师回答";
    } else if (this.history.correct_tag == 3) {
      return "学生疑惑";
    }
  }

  onMark() {
    HistoryService.mark(this.history.id).then((res: any) => {
      if (res.result) {
        this.$router.go(0);
      }
    }).catch();
  }

  onDoubt() {
    HistoryService.doubt(this.history.id).then((res: any) => {
      if (res.result) {
        this.$router.go(0);
      }
    }).catch();
  }

  @Emit("on-answer")
  onAnswer() {
  }

  toDetail() {
    this.$router.push({ name: DETAIL_ROUTE.name, params: { id: this.history.id }});
  }

}
</script>

<style scoped lang="scss">
.historyTerm {
  width: 80%;
  margin: 24px auto;
  border-radius: 8px;
  padding: 12px 16px;
  text-align: left;
  font-size: 18px;
  margin-top: 4px;
  font-weight: 500;
  &:hover {
    cursor: pointer;
  }
}
.historyId {
  font-size: 14px;
  color: white;
  padding: 2px 4px;
  border-radius: 4px;
}



</style>
